<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>商品内容页</title>	
	<link rel="stylesheet" href="__ROOT__/template/css/head.css"  type="text/css" />
	<script type="text/javascript" src='__ROOT__/template/js/jquery-1.7.2.min.js'></script>
	<script type="text/javascript" src="__ROOT__/template/js/spec.js"></script>
	<link rel="stylesheet" href="__ROOT__/template/css/content.css" />
	<jquery/>
	<script src="__ROOT__/template/js/content.js"></script>
	<style>
	.chose a{
		border:1px solid #ddd;
		color:black;
	}
 	a.active{
		border:1px solid red;
		color:red;
	 }
	 a.active:hover{
		border:1px solid red;
	 }
	 .num{
		border:1px solid grey;
		width:50px;
		height:20px;
	 }
	 .add{
	 	padding:0px 10px;
	 	font-size: 20px;
	 	cursor:pointer;
	 }
	 .del{
	 	padding:0px 10px;
	 	font-size: 18px;
	 	cursor:pointer;
	 }
	 input[name='num']{
	 	text-align: center;
	 }
	 .content{
	 	border:1px solid red;
	 	overflow: hidden;
	 	width:1210px;
	 	margin:0 auto;

	 }
	 .content .left{
	 	width:250px;
	 	border:1px solid blue;
	 	float: left;
	 	margin-left:10px;
	 }
	 .content .right{
	 	width:900px;
	 	float: right;
	 	font-family: tahoma,​arial,​宋体;
	 	color:#999;
	 	word-spacing: 6px;
	 	line-height: 20px;
	 }
	.content .right .top{
		height:50px;
		text-align: center;
		line-height: 50px;
		font-size: 25px;
		color:#000;
	}
	</style>
</head>
<body>
	<script>
	function searchAttr(obj){
	$(obj).parents("p").find("a").removeClass("active");
	$(obj).addClass("active");

	var attr='';
	$("a[attr][class='active']").each(function(){
		attr+=$(this).attr("attr")+'-';
	})
	attr=attr.slice(0,-1);

	gid={$hd.get.gid}
	// 发送ajax请求库存的id,然后记录购物车
	$.post("{|U:'getStock'}",{attr:attr,gid:gid},function(state){
		if(state==1){
			url="__METH__/gid={$hd.get.gid}&spec="+attr;
			location.href=url;
		}else{
			alert("暂时没有货了！！！");
		}
	})
}
	</script>
<!-- 最顶部的可关闭广告 -->
<!-- <div id='top_ad'><img src="__ROOT__/template/images/top_ad.jpg" alt="" /></div> -->
<!-- 最顶部的可关闭广告结束-->
<!-- 头部灰色区域 -->
<load file="__ROOT__/template/default/head.html"/>
<!-- 头部灰色区域结束 -->
<!-- 中间主体区域 -->
	<div id="main">
	<!-- logo区域 -->
<load file="__ROOT__/template/default/logo.html"/>
	<!--logo区域结束  -->
	<!-- 导航区域 -->
<load file="__ROOT__/template/default/menu.html"/>
	<!-- 导航区域结束 -->
	<!-- 面包屑导航 -->
	<div id="mian">
		<a href="{|U:'category',array('cid'=>$category[cid])}" class="da">{$category.cname}</a>
	</div>
	<!-- 面包屑导航结束 -->


	<!-- 放大镜区域	 -->
		<div id="fang">
	<!-- 左边区域 -->
		<div class="fang_l">
			<div class="tu">
				<span></span>
				<a href=""><img src="__ROOT__/{$pic.medium}" alt="" /></a>
				<div class="gai"></div>
				<div class="large">
					<img src="__ROOT__/{$pic.big}" alt="" />
				</div>
			</div>
			<div class="lie">
				<div class="lie_l">
					
				</div>
				<div class="lie_m">
					<ul>
						<li><img src="__ROOT__/{$pic.big}" alt="" /></li>
						<li><img src="__ROOT__/{$pic.big}" alt="" /></li>
						<li><img src="__ROOT__/{$pic.big}" alt="" /></li>
					</ul>
				</div>
				<div class="lie_r">
					
				</div>
			</div>

		</div>
	<!-- 左边区域结束 -->
<!-- 商品规格属性的显示 -->
	<!-- 右边区域开始 -->
		<div class="fang_r">
			<h2 class="p1">{$goods.gname}</h2>
			<h2 class="p2">{$goods.description}</h2>
			<!-- <p>商品编号：686571</p> -->
			<p>京 东 价：<span class='red_da price'>￥{$stock.price}</span> </p>

			<p>商品评分:（<a href="">已有3621人评价</a>）</p>
			
			<p>服　　务：由 京东 发货并提供售后服务。支持:</p>　　　
			<p>温馨提示：<span class='red'>北京地区支持礼品包装</span>  详情 >></p>




<!-- 规格属性区域 -->
			<!-- 属性区域 -->
		<list from="$attrClass" name="attr">
			<p class="chose"><span>选择{$attr.attr_name}：</span>
				<list from="$attr.attr" name="at">
				<!-- 如果商品选择了这个属性，我们就让他显示出来 -->
				 <?php
				 	foreach($goods_attr as $attr){
				 		if($at['av_name']==$attr['av_name']){?>
						   <if value="in_array($attr['av_id'],$stockData)">
					 		<a href="javascript:;" attr="{$attr.avid}" class="active" onclick="searchAttr(this)">{$at.av_name}</a>
					 	   <else>
					 	   	<a href="javascript:;" attr="{$attr.avid}" onclick="searchAttr(this)">{$at.av_name}</a>
					 	   </if>
				<?php
				 		}
				 	}
				 ?>
				</list>
			</p>
		</list>
<!-- 属性区域结束 -->
<!-- 规格属性区域结束 -->
		<form action="{|U:'cart/addCart',array('spec'=>Q('spec'))}" method="post">
			<!-- 购买数量的操作 -->

			<div class="chose">购买数量：<span class="del">-</span><input type="text" name="num" value="1" id=""  class='num'/><span class="add">+</span></div>


			<p>京东服务：延长保修2年 ￥390.00更多摔碰管修1年 ￥310.00详情</p>
			<p>已选择“黑”，“18-105mm 镜头套机”</p>
			

			<!-- 对购物车的操作开始 -->
			<p>
				<input type="hidden" name="stid" value="{$goods[st_id]}"  id="" />
				<input type="hidden"  name="price" value="{$goods[price]}"/>
				<input type="submit" value="加入购物车" class="jia" style="background:red; width:100px;height:40px;border-radius:10px;cursor:pointer;font-size:18px;color:white"/>
			</p>
			</form>
			<!-- 对购车的操作结束 -->
		</div>
	<!-- 右边区域结束-->
<!-- 商品规格的显示结束 -->
<!-- 商品数量的操作开始 -->
<script>
//当数量发生改变的时候，商品的总价格自动变化
 function price(){
 	var num=$("input[name='num']").val();
	var price=num*{$stock.price};
	$('.price').text('￥'+price+'.00');
 }
//触发按键的事件
$("input[name='num']").keyup(function(){
	var str=$(this).val();
	// alert(str);
	if(str.indexOf('-')>=0){
		$(this).val(1);
	}
});
	
//点击的情况
// 点击减少的时候，减少
	var c=1;
	$(".del").click(function(){
		c--;
		if(c==0){
			c=1;
		}
		$("input[name='num']").val(c);
		//获得相应的价格
		price();
	})
// 点击增加的时候，增加
	$(".add").click(function(){
		c++;
		$("input[name='num']").val(c);
		//获得相应的价格
		price();
	})
</script>
<!-- 商品数量的操作结束 -->

	</div>
</div>
	<!-- 放大镜区域结束 -->
	<!-- 主体内容区域 -->
	<div class='content'>
	<!-- 	<div class="left">
			<div class="top"></div>
		</div> -->
		<div class="right">
			<div class="top">商品详细介绍</div>
			{$goods.body}
		</div>
	</div>
	<!-- 主体区域结束 -->


</body>
</html>

